import React from "react";
import { Modal, List, Button, WhiteSpace, WingBlank, Toast } from "antd-mobile";
import { getQueryString } from "@/utils/utils.js";
import { http } from "@/utils/request/index.js";
import api from "@/utils/api.js";
import "./detail.less";
import Clipboard from "clipboard";
import { withRouter } from "react-router-dom";
class PreviewRecordDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      detail: {
        dateStart: "",
        dateEnd: "",
        amount: "",
        days: "",
      },
      showModal: false,
      baseInfo: {
        inBankName: "xx银行",
        accountName: "1234",
        inAccount: "5278473664827839",
      },
    };
  }
  componentWillMount() {
    let id = getQueryString("id");
    http
      .postJson(api.getOrderDetailsForWX, {
        id: id,
      })
      .then((res) => {
        this.setState({
          detail: res.data,
        });
      });
  }
  // 判断类型
  checkStatusMap = (orderStatus, amount, amountEnd) => {
    if (orderStatus === "20") {
      return <span>申请中</span>;
    } else if (orderStatus === "00") {
      if (amount === amountEnd) {
        return <span className="col-8C8C8C">已还款</span>;
      } else {
        return <span className="col-F2912C">待还款</span>;
      }
    } else if (orderStatus === "30" && amount !== amountEnd) {
      return <span>还款待审核</span>;
    } else {
      return <span>申请中</span>;
    }
  };
  // 判断是否待还款
  checkIsWaitReply = () => {
    let { orderStatus, amount, amountEnd } = this.state.detail;
    if (orderStatus === "00" && amount !== amountEnd) {
      return true;
    } else {
      return false;
    }
  };
  render() {
    let { detail, baseInfo } = this.state;
    return (
      <div className="bgc-f4 previewDetail">
        <div className="top bgc-fff text-center">
          <h3>预支金额(元)</h3>
          <h1 className="col-green ft-28">{detail.amount}</h1>
          <p>
            {this.checkStatusMap(
              detail.orderStatus,
              detail.amount,
              detail.amountEnd
            )}
          </p>
        </div>
        <WhiteSpace size="md" />
        <div className="bottom bgc-fff">
          <div className="w title ft-bold">
            <p>预支明细</p>
          </div>
          <div className="w">
            <div className="flex flex-between">
              <p>还款日期</p>
              <p>{detail.dateEnd}</p>
            </div>
            <div className="flex flex-between">
              <p>期限</p>
              <p>{detail.days}</p>
            </div>
            {detail.overdueFlag == "1" ? (
              <div className="flex flex-between">
                <p>逾期</p>
                <p className="col-FF8A72">{detail.day}天</p>
              </div>
            ) : (
              ""
            )}
            {detail.overdueFlag == "1" ? (
              <div className="flex flex-between">
                <p>还款金额</p>
                <p className="col-FF8A72">{detail.aboutAmount}</p>
              </div>
            ) : (
              <div className="flex flex-between">
                <p>到期应还</p>
                <p>{detail.aboutAmount}</p>
              </div>
            )}

            <div className="flex flex-between">
              <p>收款账号</p>
              <p>{detail.inBankName + " " + detail.inAccount}</p>
            </div>
            <div className="flex flex-between flex-column-center">
              <p>借款协议</p>
              <Button
                type="ghost"
                onClick={() => {
                  this.props.history.push("protocol");
                }}
                style={{ padding: "0 1em", lineHeight: "30px", height: "30px" }}
              >
                查看
              </Button>
            </div>
          </div>
        </div>

        <WhiteSpace size="xl" />
        <div>
          <div className="w">
            {this.checkIsWaitReply() ? (
              <Button
                type="primary"
                onClick={() => {
                  this.setState({
                    showModal: true,
                  });
                }}
              >
                立即还款
              </Button>
            ) : (
              ""
            )}
          </div>
        </div>

        <Modal
          popup
          visible={this.state.showModal}
          onClose={() => {
            this.setState({
              showModal: false,
            });
          }}
          animationType="slide-up"
          afterClose={() => {}}
        >
          <List
            className="popup-list bankInfo"
            renderHeader={() => <div className="ft-bold ft-16">还款明细</div>}
          >
            <List.Item>
              <div style={{ padding: "0.3rem 0" }}>
                <p>还款金额（元）</p>
                <p className="ft-22" style={{ lineHeight: 2.5 }}>
                  {detail.aboutAmount}
                </p>
                <p>
                  本金：¥{detail.amount} 利息：¥{detail.overdueAmount}
                </p>
              </div>
            </List.Item>
            <List.Item>
              <span style={{ marginRight: "0.1rem" }}>
                <img src={require("../../../images/notify.png")} />
              </span>
              请将还款金额打入以下账户并上传打款凭证
            </List.Item>
            <List.Item extra={baseInfo.inBankName}>所属银行</List.Item>
            <List.Item extra={baseInfo.accountName}>户名</List.Item>
            <List.Item extra={baseInfo.inAccount}>
              <p className="flex flex-column-center">
                银行卡号
                <Button
                  type="ghost"
                  size="small"
                  style={{
                    padding: "0 0.5em",
                    marginLeft: "0.5em",
                    display: "inline-block",
                  }}
                  id="copyBtn"
                  data-clipboard-text={baseInfo.inAccount}
                  onClick={() => {
                    this.clipboard = new Clipboard("#copyBtn");
                    // 复制成功执行的回调，可选
                    this.clipboard.on("success", function (e) {
                      Toast.success("复制成功");
                    });
                    // 复制失败执行的回调，可选
                    this.clipboard.on("error", function (e) {
                      Toast.info("复制失败");
                    });
                  }}
                >
                  复制账号
                </Button>
              </p>
            </List.Item>
            <List.Item>
              <Button
                type="primary"
                style={{ marginTop: "0.3rem" }}
                onClick={() => {
                  this.setState({
                    showModal: false,
                  });
                  this.props.history.push(`repayment?id=${detail.id}`);
                }}
              >
                上传还款凭证
              </Button>
            </List.Item>
          </List>
        </Modal>
      </div>
    );
  }
}

export default withRouter(PreviewRecordDetail);
